<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add Friend</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f4f4f4;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }

    #container {
        text-align: center;
    }

    input[type="text"] {
        padding: 10px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }

    input[type="submit"] {
        padding: 10px 20px;
        font-size: 16px;
        background-color: #007bff;
        color: #fff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

    input[type="submit"]:hover {
        background-color: #0056b3;
    }
</style>
</head>
<body>

<div id="container">
    <h2>Add Friend</h2>
    <input type="text" id="friendName" placeholder="why">
    <br><br>
    <input type="submit" value="Add Friend" onclick="addFriend()">
</div>

<script>
function addFriend() {
    var friendName = document.getElementById('friendName').value;
    if (friendName.trim() === '') {
        alert('Please enter a friend\'s name.');
    } else {
        alert('Friend ' + friendName + ' added successfully!');
        // 此处可以添加其他逻辑，如将好友名称添加到列表中或向后端发送请求等
    }
}
</script>

</body>
</html>
